<template>
  <div class="layout">
    <!-- 引入Header组件 -->
    <HeaderComponent />
    <!-- 其他布局内容 -->
    <div class="main-contain">
      <router-view />
    </div>

    <zb-login-pup />
  </div>
</template>

<script setup>
import HeaderComponent from './components/header/index.vue' // 假设Header组件的路径是这样
import { onMounted, ref } from 'vue';
  import { useAppStore } from '@/stores/app';
  import { rgbToHsl } from '@/utils/util.ts';
  
  function updateViewportHeight() {
      const vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
  }
  onMounted(()=>{
    const themecolor = useAppStore().getWebsite.themecolor || '#154193'
    const hslData = rgbToHsl(themecolor)
    // console.log('修改按钮颜色', hslData)
    const yanse = Number(hslData[0]);
    const baohedu = hslData[1] ? Number(hslData[1]) : 100;
    const sediao = hslData[2] ? Number(hslData[2]) : 50;
    const sediaoAdd3 = sediao+10 > 65 ? 65 : sediao+10;
    const sediaoAdd5 = sediao+18 > 70 ? 70 : sediao+18;
    const sediaoAdd7 = 78;
    const sediaoAdd8 = 84;
    const sediaoAdd9 = 98;
    document.documentElement.style.setProperty('--el-color-primary', `hsl(${yanse}, ${baohedu}%, ${sediao}%)`);
    document.documentElement.style.setProperty('--el-color-primary-light-3', `hsl(${yanse}, ${baohedu}%, ${sediaoAdd3}%)`);
    document.documentElement.style.setProperty('--el-color-primary-light-5', `hsl(${yanse}, ${baohedu}%, ${sediaoAdd5}%)`);
    document.documentElement.style.setProperty('--el-color-primary-light-7', `hsl(${yanse+10}, ${baohedu - 10}%, ${sediaoAdd7}%)`);
    document.documentElement.style.setProperty('--el-color-primary-light-8', `hsl(${yanse+15}, ${baohedu - 15}%,  ${sediaoAdd8}%)`);
    document.documentElement.style.setProperty('--el-color-primary-light-9', `hsl(${yanse+20}, ${baohedu}%, ${sediaoAdd9}%)`);
    document.documentElement.style.setProperty('--el-color-primary-dark-2', `hsl(${yanse}, ${baohedu}%, ${sediao}%)`);
    // 初始化
    updateViewportHeight();
    
    // 监听窗口大小变化
    window.addEventListener('resize', updateViewportHeight);
    window.addEventListener('orientationchange', updateViewportHeight);
    
    
    
  })

</script>


<style lang="scss" scoped>
.layout{width: 100%; display: flex; height: 100%; align-items: flex-start}
$hvH: calc(var(--vh, 1vh) * 100);
#page_load{position: fixed; width: 100%; height: 100%; z-index: var(--zindex4); left: 0; top: 0; display: none; align-items: center; justify-content: center;}
.page-box{width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.5); border-radius: 16px;}
// .layout-default{display: flex;}
.main-contain {
  width: calc(100vw - var(--headerW)); height: $hvH; margin-left: var(--headerW); overflow-y: auto;
  &.error{margin-left: 0px; width:100%;}
}
@media only screen and (max-width: 769px){
  
  .main-contain{
    margin-left: 0px; width: 100%;min-height:50vh;
  }
  .nologin{
    :deep(.need-login-btn){display: none;}
    // .main-contain{display: none;}:deep(.header-logo),
    :deep(.layout-header){border-bottom: none;}
  }
  .loginok{
    .main-contain{display: flex;}
  }
}
</style>

